<template>
  <view class="video_play">
    <image :src="videoInfo.img" mode="" />
    <view class="header">
      <view class="share">
        <text>分享</text>
        <u-icon name="zhuanfa" size="60" color="#ffffff"> </u-icon>
        <button open-type="share"></button>
      </view>
    </view>
    <view class="content">
      <video
        :src="videoInfo.video"
        object-fit="fill"
        page-gesture
        show-mute-btn
        enable-play-gesture
      ></video>
    </view>
    <view class="down" @click="downVideo">下载高清</view>
  </view>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      videoInfo: {},
    };
  },
  methods: {
    async downVideo() {
      //下载到小程序内存中
      uni.showLoading({
        title: "下载中",
      });
      const res = await uni.downloadFile({
        url: this.videoInfo.video,
      });
      const { tempFilePath } = res[1];
      //将内存文件下载本地
      uni.saveVideoToPhotosAlbum({
        filePath: tempFilePath,
        success: function() {
          uni.hideLoading();
          uni.showToast({
            title: "下载成功",
          });
        },
      });
    },
  },
  onLoad() {
    /* var app = getApp();
    this.videoInfo = app.globalData.video; */
    this.videoInfo = this.$store.state.playInfo;
  },
};
</script>
<style lang="scss" scoped>
.video_play {
  position: relative;
  image {
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    //滤镜
    filter: blur(10rpx);
  }
  .header {
    display: flex;
    justify-content: flex-end;
    margin: 20rpx 30rpx;
    .share {
      position: relative;
      display: flex;
      align-items: center;
      padding: 10rpx;
      border-radius: 12rpx;
      background-color: rgb(128, 128, 128);
      text {
        font-size: 40rpx;
        color: white;
      }
      button {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
      u-icon {
      }
    }
  }

  .content {
    display: flex;
    justify-content: center;
    video {
      width: 420rpx;
      height: 720rpx;
    }
  }
  .down {
    margin: 50rpx 60rpx;
    padding: 16rpx;
    border-radius: 12rpx;
    font-size: 36rpx;
    background-color: #ff69b4;
    text-align: center;
    color: white;
  }
}
</style>
